<template>
  <view class="container">
    <!-- 设备信息 -->
    <view class="section">
      <view class="row"><text class="label">设备编号：</text><text class="value">{{ deviceId }}</text></view>
      <view class="row"><text class="label">设备编号：</text><text class="value">{{ deviceSn }}</text></view>
    </view>

    <view class="divider"></view>

    <!-- 流量卡信息 -->
    <view class="section">
      <view class="row"><text class="label">ICCID：</text><text class="value">{{ iccid }}</text></view>
      <view class="row"><text class="label">运营商：</text><text class="value">{{ carrier }}</text></view>
      <view class="row"><text class="label">卡状态：</text><text class="value status ok">{{ cardStatus }}</text></view>
    </view>

    <view class="divider"></view>

    <!-- 续费设置 -->
    <view class="section">
      <view class="row">
        <text class="label">续费周期</text>
        <view class="options">
          <view class="opt" :class="{ active: selected === 0 }" @click="select(0)">1年</view>
          <view class="opt" :class="{ active: selected === 1 }" @click="select(1)">2年</view>
        </view>
      </view>
      <view class="row amount">
        <text class="label">应付金额</text>
        <text class="price">{{ amount }}元</text>
      </view>
    </view>

    <view class="divider"></view>

    <view class="submit">
      <u-button type="primary" text="提交续费订单" shape="circle" @click="submit" />
    </view>
  </view>
  
</template>

<script>
export default {
  data() {
    return {
      deviceId: '',
      deviceSn: '',
      iccid: '',
      carrier: '中国移动',
      cardStatus: '正常',
      selected: 0,
      prices: [36, 72]
    }
  },
  computed: {
    amount() {
      return this.prices[this.selected] || 0;
    }
  },
  onLoad(options) {
    this.deviceId = options?.deviceId || 'K1490078243343';
    this.deviceSn = this.deviceId;
    this.iccid = `K${this.deviceId}`;
  },
  methods: {
    select(i) { this.selected = i; },
    submit() { uni.showToast({ title: '已提交续费订单', icon: 'none' }); }
  }
}
</script>

<style lang="scss" scoped>
page { height: 100%; }
.container { min-height: 100%; background: #f6f7fb; padding: 24rpx; }
.section { background: #fff; border-radius: 12rpx; padding: 20rpx; box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.04); }
.row { display: flex; align-items: center; justify-content: space-between; padding: 12rpx 4rpx; }
.label { color: #666; font-size: 26rpx; }
.value { color: #111; font-size: 28rpx; }
.status.ok { color: #22c55e; }
.divider { height: 16rpx; }
.options { display: flex; gap: 16rpx; }
.opt { background: #e5e7eb; color: #666; padding: 8rpx 22rpx; border-radius: 10rpx; }
.opt.active { background: #60a4f7; color: #fff; }
.amount .price { color: #60a4f7; font-weight: 600; }
.submit { padding: 24rpx; }
</style>